
<h1>Text area</h1>
<h4>Default</h4>
<FluentTextArea></FluentTextArea>
<FluentTextArea>
    <span>label</span>
</FluentTextArea>

<h4>Full Width</h4>
<FluentTextArea style="width: 100%;"></FluentTextArea>

<h4>Placeholder</h4>
<FluentTextArea Placeholder="Placeholder"></FluentTextArea>

<!-- Required -->
<h4>Required</h4>
<FluentTextArea Required="true"></FluentTextArea>

<!-- Disabled -->
<h4>Disabled</h4>
<FluentTextArea Disabled="true"></FluentTextArea>
<FluentTextArea Disabled="true">
    <span>label</span>
</FluentTextArea>
<FluentTextArea Disabled="true" Placeholder="placeholder"></FluentTextArea>

<!-- Read only -->
<h4>Read only</h4>
<FluentTextArea Readonly="true" Value="Readonly text area"></FluentTextArea>
<FluentTextArea Readonly="true" Value="Readonly text area">label</FluentTextArea>

<!-- Read only -->
<h4>Autofocus</h4>
<FluentTextArea Autofocus="true">autofocus</FluentTextArea>

<!-- Resize -->
<h4>Resize</h4>
<h5>Both</h5>
<FluentTextArea Resize="Resize.Both">resize both</FluentTextArea>

<h5>Horizontal</h5>
<FluentTextArea Resize="Resize.Horizontal">resize horizontal</FluentTextArea>

<h5>Vertical</h5>
<FluentTextArea Resize="Resize.Vertical">resize vertical</FluentTextArea>

<h4>Filled</h4>
<h5>Default</h5>
<FluentTextArea Appearance="Appearance.Filled"></FluentTextArea>
<FluentTextArea Appearance="Appearance.Filled">
    <span>label</span>
</FluentTextArea>

<h5>Placeholder</h5>
<FluentTextArea Appearance="Appearance.Filled" Placeholder="Placeholder"></FluentTextArea>

<!-- Required -->
<h5>Required</h5>
<FluentTextArea Appearance="Appearance.Filled" Required="true"></FluentTextArea>

<!-- Disabled -->
<h5>Disabled</h5>
<FluentTextArea Appearance="Appearance.Filled" Disabled="true"></FluentTextArea>
<FluentTextArea Appearance="Appearance.Filled" Disabled="true">
    <span>label</span>
</FluentTextArea>
<FluentTextArea Appearance="Appearance.Filled" Disabled="true" Placeholder="placeholder"></FluentTextArea>

<!-- Read only -->
<h5>Read only</h5>
<FluentTextArea Appearance="Appearance.Filled" Value="Readonly text area" Readonly="true">
    label
</FluentTextArea>
<FluentTextArea Appearance="Appearance.Filled" Value="Readonly text area" Readonly="true">
    label
</FluentTextArea>

<!-- With label -->
<h4>Visual vs audio label</h4>
<FluentTextArea>
    <span aria-label="Audio label">Visible label</span>
</FluentTextArea>

<!-- With hidden label -->
<h4>Audio label only</h4>
<FluentTextArea>
    <span aria-label="Audio label only"></span>
</FluentTextArea>

<!-- With aria label -->
<h4>With aria-label</h4>
<FluentTextArea aria-label="Text area with aria-label"></FluentTextArea>